import { Component } from "react";
import { v4 as uuid } from 'uuid';
import './Add.css'

export class Add extends Component {
    // 新增一个待办项
    finishedInput = (event) => {
        // 如果用户按下的不是回车键，不执行任何动作
        if(event.keyCode !== 13) return;
        // 输入判空
        if(event.target.value.trim() === ''){
            alert('不要啥也不填呀 o(╥﹏╥)o')
            return
        }
        const newTodoItem = {
            id: uuid(),
            title: event.target.value,
            completed: false

        }
        // 获取父组件传递过来的函数
        const {eventBus} = this.props;
        // 将新数据传入父组件传递过来的函数内，该函数改变父组件state，实现子向父传递data
        eventBus(newTodoItem)
        event.target.value = ''
    }
    render() {
        return (
            <div className="todo-header">
                <input type="text" placeholder="请输入你的任务名称，按回车键确认" onKeyUp={this.finishedInput}/>
            </div>
        )
    }
}